<template>
	<view class="container">
		<!-- 左侧 -->
		<scroll-view :style="{height:winHeight+'px'}" class="left-view" scroll-y>
			<uni-list>
				<uni-list-item 
					clickable 
					@click="curCategory=i" 
					:style="{backgroundColor:curCategory===i?'#fff':'#eee'}" 
					v-for="(c,i) in categoryList" 
					:key="i" 
					:title="c.cname"></uni-list-item>
			</uni-list>
		</scroll-view>
		<!-- 右侧 -->
		<scroll-view class="right-view" :style="{height:winHeight+'px'}" scroll-y>
			<uni-list>
				<uni-list-item 
					v-for="(p,i) in plist" 
					:key="i" 
					:thumb="$base + p.pic" 
					thumbSize="lg" 
					link 
					:to="`/pages/details/details?lid=${p.lid}`"
					:title="p.title"
					ellipsis="2"></uni-list-item>
			</uni-list>
			<text style="display: block;text-align: center;" v-show="plist.length==0">没有查询到相关的商品</text>
		</scroll-view>
	</view>
</template>

<script>
import { productCategory, productList } from '../../service'
	export default {
		data() {
			return {
				categoryList:[], //商品类别列表
				winHeight:0,     //窗口高度
				curCategory:-1,  //当前点击类别
				plist:[],      //某一个类别下的数据列表
			}
		},
		watch:{
			async curCategory(){
				let kw = this.categoryList[this.curCategory].keywords
				let data = await productList(1,kw)
				// console.log('某一类别下的数据:',data);
				this.plist = data.data
			}
		},
		async onLoad() {
			let {windowHeight} = uni.getWindowInfo()
			this.winHeight = windowHeight
			// console.log(this.winHeight);
			let data = await productCategory()
			// console.log('商品分类:',data);
			this.categoryList = data.concat(data)
			this.curCategory = 0
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		.left-view {
			width: 94px;
		}
		.right-view {
			flex:1
		}
	}
</style>
